<template>
	<view style="display: flex;flex-direction: column;align-items: center;" >
		<uni-icons type="left" color="inherit" size="20" style="position: absolute;
    z-index: 3000;
    top: 120rpx;
    left: 30rpx;" @click="goback()"></uni-icons>
		<view class="top" :style="{ background: `url(${$wanlshop.oss(srcBg)})`}">
			<view class="left">
				<image class="img" :src="$wanlshop.oss(obj.avatar_img)" mode="aspectFill"></image>
				<view class="right_a" >
					<text>{{obj.name}}</text>
					<view class="flex">
						<view class="span" @tap="toAuth(userjiId)" style="margin: 12rpx 12rpx 12rpx 0;">
							<text>职称认证({{ imgList.length }})</text>
							<uni-icons type="right" color="#fff" size="10"></uni-icons>
						</view>
						<view class="fs12 relative" @tap="toAuth(userjiId)">
							<image class="xunzhang" src="../../../static/images/service/xunzhang.png"></image>
							<view class="absolute text-center flex flex-middle flex-center" style="top: 2rpx;bottom: 10rpx;left: 50rpx;right: 10rpx;">
								<view>{{ certificate_img.length }}枚</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="size">
					技师评分
				</view>
				<view class="assess">
					<text style="font-size: 38rpx;">{{obj.score }}</text>
					<span style="font-size: 20rpx;">分</span>
					<!-- <text>{{obj.score.slice(1,4)}}</text> -->
				</view>
				<uni-rate allow-half size="10" activeColor="#FD7601" :readonly="true" :value="obj.score" />
			</view>
		</view>
		<!-- card -->
		<view class="card">
			<view class="heart al_center mg">
				<uni-icons class="mg" type="heart" size="20"></uni-icons>
				<text>累计服务 {{obj.order_num }}次</text>
			</view>
			<view class="shop al_center mg">
				<uni-icons class="mg" type="shop" size="20"></uni-icons>
				<text>{{obj.store.store_name }}</text>
			</view>
			
			<!-- swiper -->
			<view class="switch">
				<view class="title">
					<text :class="{bor_bo:currenta==0}" @tap="changeCurrent(0)" >技师评价({{ tagList[0].num}})</text>
					<text :class="{bor_bo:currenta==1}"  @tap="changeCurrent(1)">我的回帖({{ replyCommentList.length }})</text>
				</view>
			<view class="swiper-container">	
				<swiper :current="currenta" @change ="changeCurr" class="swiper-banner">
					<swiper-item>
						 <view class="content margin-bottom-bj">
						 	<view class="tag-list solid-bottom margin-bottom-sm">
						 		<view class="item" :class="index == selectTag? 'active': ''" v-for="(item,index) in tagList"
						 			:key="index" @tap="handle_tag(index,item.tag)">{{item.title}}({{item.num}})</view>
						 	</view>
						 	<!-- 评论卡片 -->
							<view v-if="commentList.length" class="w100P h100P">
								<view class="list radius-bock" v-for="(item, index) in commentList" :key="item.id">
									<view class="comment solid-bottom margin-bottom-sm">
										<!-- 用户信息 -->
										<view class="userinfo flex justify-between margin-bottom-sm">
											<view class="avatar flex">
												<view class="cu-avatar round margin-right-sm"
													:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 35, 35, 2, 'avatar') + ')' }">
												</view>
												<view class="text-sm">
													<view class="flex flex-middle">
														<text>{{ item.user.nickname }}</text>
														<image class="ml5" style="height: 38rpx;" mode="heightFix" :src="$wanlshop.oss(item.user.level.icon_img)"></image>
														<text class="fs10 ml5 gray-font">{{ item.user.level.name }}</text>
													</view>
													<wanl-rate :size="9" :current="item.score" :disabled="true" />
												</view>
											</view>
											<view class="text-gray" style="font-size: 22rpx;">{{ $wanlshop.timeToDate(item.createtime) }}
											</view>
										</view>
							
										<!-- 评论详情 -->
										<view class="details margin-bottom-xs">
											<view class="margin-bottom-sm">{{ item.content }}</view>
											<view class="text-gray text-sm">购买：{{ item.suk }}</view>
										</view>
										<view class="grid flex-sub grid-square margin-bottom-xs" v-if="item.images.length"
											:class="[item.images.length > 3 ? 'col-3' : 'col-' + item.images.length]">
											<view class="bg-img" style="margin-bottom: unset;" v-for="(image, tagInd) in item.images"
												:key="tagInd" @tap="previewImage(item.images, tagInd)"
												:style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 248, 0) + ')' }"></view>
										</view>
										<!-- 回帖区 -->
										<view class="replyComment">
											<view class="line"></view>
											<view class="w100P ml30 flex" v-for="cItem in item.child" :key="cItem.id">
												<view>
													<image class="ml5 avatar" style="height: 38rpx;" mode="heightFix" :src="$wanlshop.oss(cItem.user.avatar)"></image>
												</view>
												<view class="flex-1">
													<view class="flex">
														<view class="flex-1 w100P">{{ cItem.user.username }}</view>
														<view class="time">{{ cItem.createtime }}</view>
													</view>
													<view>{{ cItem.content }}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<wanl-empty v-else  text="暂无评价消息"></wanl-empty>
						 </view>
						
					</swiper-item>
					<swiper-item>
						<view class="content margin-bottom-bj">
							<view v-if="replyCommentList.length" class="w100P h100P">
								<view class="list radius-bock" v-for="(item, index) in replyCommentList" :key="item.id">
									<view class="comment solid-bottom margin-bottom-sm">
										<!-- 用户信息 -->
										<view class="userinfo flex justify-between margin-bottom-sm">
											<view class="avatar flex">
												<view class="cu-avatar round margin-right-sm"
													:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 35, 35, 2, 'avatar') + ')' }">
												</view>
												<view class="text-sm">
													<view class="flex flex-middle">
														<text>{{ item.user.nickname }}</text>
														<image class="ml5" style="height: 38rpx;" mode="heightFix" :src="$wanlshop.oss(item.user.level.icon_img)"></image>
														<text class="fs10 ml5 gray-font">{{ item.user.level.name }}</text>
													</view>
													<wanl-rate :size="9" :current="item.score" :disabled="true" />
												</view>
											</view>
											<view class="text-gray" style="font-size: 22rpx;">{{ $wanlshop.timeToDate(item.createtime) }}
											</view>
										</view>
							
										<!-- 评论详情 -->
										<view class="details margin-bottom-xs">
											<view class="margin-bottom-sm">{{ item.content }}</view>
											<view class="text-gray text-sm">购买：{{ item.suk }}</view>
										</view>
										<view class="grid flex-sub grid-square margin-bottom-xs" v-if="item.images.length"
											:class="[item.images.length > 3 ? 'col-3' : 'col-' + item.images.length]">
											<view class="bg-img" style="margin-bottom: unset;" v-for="(image, tagInd) in item.images"
												:key="tagInd" @tap="previewImage(item.images, tagInd)"
												:style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 248, 0) + ')' }"></view>
										</view>
										<!-- 回帖区 -->
										<view class="replyComment">
											<view class="line"></view>
											<view class="w100P ml30 flex" v-for="cItem in item.child" :key="cItem.id">
												<view>
													<image class="ml5 avatar" style="height: 38rpx;" mode="heightFix" :src="$wanlshop.oss(cItem.user.avatar)"></image>
												</view>
												<view class="flex-1">
													<view class="flex">
														<view class="flex-1 w100P">{{ cItem.user.username }}</view>
														<view class="time">{{ cItem.createtime }}</view>
													</view>
													<view>{{ cItem.content }}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<wanl-empty v-else  text="暂无回帖消息"></wanl-empty>
						</view>
					</swiper-item>
				</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// bg: '../../../static/images/test/bg@4x.png',

				srcBg: '',
				// 模拟数据
				obj: {
					name:"张大茂",
					userImg: "../../../static/images/face/auth-face.png",
					add:2000,
					shop:"萌宠之家洗护中心",
					appraise: "5.00",
					
				},
				listAppraise:
					{
						add:123,
						good:20,
						can:20,
						no:20,
						haveImg:20,
					
						list:[
							{
								autor:"../../../static/images/face/auth-face.png",
								name:"22222",
								isbai:0,
								createTime:"2024.07.30",
								pj:5,
								shops:"冻干3斤猫粮",
								text:"猫咪特别爱吃，特别特别特别爱吃",
								img:"../../../static/images/test/bg@4x.png",
								ispj:0,
								iscan:0
							}
						]
						
					},
				list:[],
				
				
				userjiId:0,
				currenta:0,
				imgList: [],
				// 标签列表
				tagList: [{
					title: '全部评论',
					tag: '',
					num: 0
				}, {
					title: '好评',
					tag: 'good',
					num: 0
				}, {
					title: '中评',
					tag: 'pertinent',
					num: 0
				}, {
					title: '差评',
					tag: 'poor',
					num: 0
				},{
					title: '有图数',
					tag: 'figure',
					num: 0
				}],
				// 当前选择标签
				selectTag: 0,
				commentList: [],
				replyCommentList: [],
				imgList: [],
				certificate_img: []
			};
		},
		onLoad(options) {
			this.userjiId = options.id
			this.getLoad()
			this.getList()
			this.getStaffCommentsSummary()
			this.getStaffComments("")
		},
		methods:{
			getLoad() {
				this.$api.post({
					url: `/wanlshop/product/hotsale?page=${1}`,
					success: res => {
						console.log(res,'--------------------------------')
						res.data.forEach((e, i) => {
							if (e.row == "技师背景") {
								this.srcBg = e.img_url
							}
						})
					}
				})
			},
			getList () {
				let  userjiId = this.userjiId
				this.$api.get({
					url: '/wanlshop/store/staffDetail',
					data: {
						id: userjiId
					},
					success: res => {
						this.obj = res
						if (res.medal_img) {
							this.certificate_img = res.medal_img.split(",");  // 徽章
						}
						if (res.certificate_img) {
							// 测试图片
							this.imgList = res.certificate_img.split(",");  // 证书
						}
					}
				});
			},
			goback() {
				// 回退到上一个页面
				uni.navigateBack({
				    delta: 1 // 默认值是1，表示回退到上一个页面
				});
			},
			// 点击标签
			handle_tag(index,tag) {
				this.selectTag = index;
			    this.getStaffComments(tag)
			},
			getStaffCommentsSummary () {
				let  userjiId = this.userjiId
				this.$api.get({
					url: '/wanlshop/store/staffCommentsSummary',
					data: {
						staff_id: userjiId
					},
					success: res => {
						// this.obj = res
						// let arr = res.medal_img.split(",");
						// this.imgList = arr
						// console.log(res,'userjiId')
						this.infoObj = res
						this.tagList = [{
							title: '全部评论',
							tag: '',
							num: res.total
						}, {
							title: '好评',
							tag: 'good',
							num: res.good
						}, {
							title: '中评',
							tag: 'pertinent',
							num: res.pertinent
						}, {
							title: '差评',
							tag: 'poor',
							num: res.poor
						},{
							title: '有图数',
							tag: 'figure',
							num: res.figure
						}]
						
					}
				});
			},
			getStaffComments (tag) {
				let  userjiId = this.userjiId
				this.$api.get({
					url: '/wanlshop/store/staffComments',
					data: {
						staff_id: userjiId,
						tag
					},
					success: res => {
						console.log(res,'commentList')
						this.commentList = res.data
						this.replyCommentList = JSON.parse(JSON.stringify(res.data)).filter(item => item.child.length > 0)
					}
				});
			},
			changeCurrent(num){
				this.currenta = num
			},
			changeCurr(e){
				this.currenta = e.detail.current
				// console.log(e)
			},
			toAuth(userjiId){
				uni.navigateTo({
					url:`/pages/service/technician/auth?userId=${userjiId}`
				})
			}
		},
		
		
		
	}
</script>

<style lang="scss">
	page {
		background-color: #f6efe9;
	}
	.pj{
		width: 700rpx;
		box-shadow: 0 0 4rpx 0 #aaa;
		padding: 24rpx;
		border-radius: 24rpx;
		margin-top: 10rpx;
		.span{
			display: flex;
			flex-wrap: wrap;
			text{
				display: block;
				border-radius: 391px;
				font-size: 24rpx;
				color: #FFFFFF;
				background-color: #11E195;
				margin: 10rpx 15rpx ;
				padding: 10rpx;
			}
		}
		.card_list{
			position: relative;
			.top_A{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					.autor{
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}
					text{
						
						font-size: 32rpx;
						color: #3D3D3D;
						margin-left: 16rpx;
					}
					.vip_is{
						display: flex;
						align-items: center;
						margin-left: 36rpx;
						image{
							width: 30rpx;
							height: 30rpx;
						}
						text{
							
							font-family: PingFang SC;
							font-size: 16rpx;
							font-weight: normal;
							line-height: normal;
							text-align: center;
							letter-spacing: 0px;
							
							font-variation-settings: "opsz" auto;
							background: linear-gradient(90deg, #B8C4D8 0%, #C3CBD8 99%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;
						}
					}
				}
				.right{
					
					font-family: PingFang SC;
					font-size: 22rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;
					
					font-variation-settings: "opsz" auto;
					/* 次要信息 */
					color: #9C9C9C;
				}
			}
			.pin{
				display: flex;
				align-items: center;
				margin: 32rpx 0;
				text{
					
					font-family: PingFang SC;
					font-size: 22rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;
					
					font-variation-settings: "opsz" auto;
					/* 次要信息 */
					color: #9C9C9C;
					margin-left: 6rpx;
				}
			}
			.main{
				.text{
					font-family: PingFang SC;
					font-size: 30rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;
					
					font-variation-settings: "opsz" auto;
					color: #3D3D3D;
				}
				.image{
					image{
						width: 200rpx;
						height: 200rpx;
						border-radius: 16rpx 0px 0px 16px;
					}
				}
			}
			.foot{
				display: flex;
				position: absolute;
				bottom: 0 ;
				right: 30rpx;
				.al_center{
					display: flex;
					align-items: center;
				}
				.ml{
					margin:0 24rpx;
				}
			}
		}
	}
	.top {
		background-size: cover;
		border-radius: 0 0 10% 10%;
		width: 100%;
		height: 400rpx;
		position: relative;
		.left{
			position: absolute;
			bottom: 108rpx;
			left: 64rpx;
			display: flex;
			.right_a{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 34rpx;
				text{
					font-size: 30rpx;
					color: #000000;
				}
				.span{
					display: flex;
					align-items: center;
					border-radius: 6rpx;
					opacity: 1;
					text-align: center;
					padding: 4rpx 8rpx;
					/* 字体标准黑色 */
					background: #FD7601;
					text{
						font-size: 22rpx;
						color: #FFFFFF;
						display: block;
						
					}
				}
			}
		}
		
		.right{
			position: absolute;
			right: 72rpx;
				bottom: 108rpx;
				.size{
					font-size: 24rpx;
				}
		}
	}
	.img {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		
	}
	uni-swiper {
		height: 760rpx;
		max-height: 760rpx;
		overflow-y: auto;
	}
	.imag{

		width: 350rpx;
		height: 224rpx;
		margin-top: 100rpx;
	
	}
	.center{
		display: flex;
		align-items: center;
		justify-content: center;
		.noList{
			display: flex;
			flex-direction: column;
			
			align-items: center;
		}
	}
	.card{
		font-size: 26rpx;
		padding: 24rpx;
		border-radius: 16rpx;
		width: 96%;
		position: absolute;
		top: 320rpx;
		background: #FFFFFF;
	
		box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.05);
		.al_center{
			display: flex;
			align-items: center;
		}
		.mg{
			margin:8rpx 10rpx;
		}
	}

	.switch{
		width: 100%;
		// position: absolute;
		// top: 500rpx;
		
		
		.swiper-container {
			border-top: 2rpx solid rgba(0, 0, 0, 0.05);
		}
		
		
		.title{
			width: 100%;
			display: flex;
			justify-content: space-around;
			padding: 10rpx 0;
			text{
				display: block;
				padding-bottom: 10rpx;
			}
		}
		.bor_bo{
			border-bottom: 4rpx solid #FD7601;
		}
		
		.swiper-banner {
			height: 980rpx;
			margin-bottom: 10rpx;
		
			swiper-item {
				overflow: scroll;
				display: flex;
				justify-content: center;
		
				.img-bg {
					width: 98%;
					height: 100%;
					background-size: cover !important;
					background-position: center;
					border-radius: 16rpx;
				}
			}
			
			.content {
				width: 100%;
				background-color: white;
				border-radius: 24rpx;
				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
				// padding: 30rpx;
			
				.tag-list {
					width: 100%;
					display: flex;
					gap: 16rpx;
					flex-wrap: wrap;
					padding: 20rpx 0;
					
					.item {
						font-size: 22rpx;
						flex-shrink: 0;
						color: #3D3D3D;
						background-color: #f6efe9;
						padding: 10rpx 20rpx;
						border-radius: 782rpx;
						width: fit-content;
			
						&.active {
							background-color: #FD7601;
							color: white;
						}
					}
				}
			
				.list {
					background-color: transparent;
					 margin-bottom: 20rpx;
					 
					// 评论
					.comment {
						background-color: white;
						padding: 20rpx;
						border-radius: 18rpx;
						font-size: 26rpx;
						// margin-bottom: 22rpx;
					}
				}
			}
			
			
		}
		
	}
	.xunzhang {
		width: 114rpx;
    height: 53rpx;
	}

.replyComment {
	margin-left: 40rpx;
	.avatar {
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
	}
	.time {
		font-size: 24rpx;
		text-align: right;
		color: #aaaaaa;
	}
}
</style>